/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ScrollView,
  RefreshControl,
  View,
  Image,
  Alert
} from 'react-native';

import ViewPager from 'react-native-viewpager';
import mixin from 'react-timer-mixin';

class Row extends Component {  
  	_onClick(){  
   		this.props.onClick(this.props.data);  
  	}
  	
  	render(){  
    	return (  
        	<View style={styles.row}>  
	          	<Text style={styles.text}>
	            	{this.props.data.text}  
	          	</Text>  
        	</View>  
    	);  
  	}
}

const BANNER_IMGS = [  
    require('./images/banner/job1.jpg'),  
    require('./images/banner/job2.jpg'),  
    require('./images/banner/job3.jpg') 
];  

class MainPage extends Component {
	constructor(props) {  
		super(props);
    	this.state = {  
      		isRefreshing: false,  
      		dataSource: new ViewPager.DataSource({pageHasChanged: (p1, p2)=>p1 !== p2})
            .cloneWithPages(BANNER_IMGS),
      		loaded: 0,  
      		rowData: Array.from(new Array(20)).map(  
        		(val, i) => ({text:'初始行 ' + i})),  
    	};  
    	
    	var dataSource = new ViewPager.DataSource({  
	        pageHasChanged: (p1, p2) => p1 !== p2,  
	    });  
	    
	    Alert.alert(this.props.name);
	    // 实际的DataSources存放在state中  
  	}
	
	_onRefresh() { 
	  	this.setState({isRefreshing: true});  
    	setTimeout(() => {  
	      	// 准备下拉刷新的5条数据  
	      	const rowData = Array.from(new Array(5))  
	     		.map((val, i) => ({  
	      		 text: '刷新行 ' + (+this.state.loaded + i)  
	      	})).concat(this.state.rowData);  
	   
	      	this.setState({  
	        	loaded: this.state.loaded + 5,  
	        	isRefreshing: false,  
	        	rowData: rowData,  
	      	});  
	    }, 5000);  
    }
  	
  	render() {
  		let rows = this.state.rowData.map((row,ii) => {  
	    	return <Row key={ii} data={row}/>;  
	    }); 
	    
   		return (
        	<ScrollView style={styles.scrollview}
		        refreshControl={  
		          	<RefreshControl  
		           		refreshing={this.state.isRefreshing}  
		            	onRefresh={this._onRefresh.bind(this)}  
		            	colors={['#ff0000', '#00ff00','#0000ff','#3ad564']}  
		           		progressBackgroundColor="#ffffff"  
		          	/>  
		        }>  
		        
		        <ViewPager  
				    style={{height:130}}  
				    dataSource={this.state.dataSource}  
				    renderPage={this._renderPage.bind(this)}  
				    isLoop={true}  
				    autoPlay={true}/>  
            	{rows}
            </ScrollView>
    	);
  	}
  	
  	_renderPage(data, pageID) {  
		return (  
		    <Image  
		        source={data}  
		        style={styles.page}/>  
		);  
	} 
}

const styles = StyleSheet.create({
  	row: {  
	    borderColor: 'red',  
	    borderWidth: 5,  
	    padding: 20,  
	    backgroundColor: '#3a5795',  
	    margin: 5,  
	},  
	text: {  
	    alignSelf: 'center',  
	    color: '#fff',  
	},  
	scrollview: {  
	    flex: 1,  
	},  
	page: {  
        flex: 1,  
        height: 130,  
        resizeMode: 'stretch'  
    },
});

module.exports = MainPage;
